<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>image-color-select</title>
  <style>
		.color{
			height:40px;
			width:40px;
		}
    .border{
      border: 1px solid #ffae0d;
      width: 50%;
    }
		#text{
			padding-left:10px;
			line-height:40px;
		}
  </style>
</head>
<body>
  <div id="root">
    <div class="container">
      <div class="border">
        <h2>图片颜色选择</h2>
        <canvas id="cvs"></canvas>
        <button @click="doInput">上传</button>
        <div>
          <div id="color" class="color"></div>
          <div id="text"></div>
        </div>
        </div>
      <div class="border">
        <h2>rgba转16进制颜色</h2>
        rgba：<input :model="rgba" @change="transferData"/>
        hex:<input id="hex-input" :model="hex">
        <button @click="copy">复制</button>
        <div id="color1" class="color"></div>
      </div>
    </div>
  </div>
  <script type="module">
    import {Component} from '../core/index.js'
    const component = new Component({
        data() {
          return {
            cvs: null,
            ctx: null,
            rgba: '',
            hex: ''
          };
        },
        watch: {
        },
        created() {
        },
        mounted() {
        },
        destroyed() {
        },
        methods: {
          /**
           * 复制输入框内容
           **/
          copy() {
            const copy = document.querySelector('#hex-input')
            copy.select()
            copy.setSelectionRange(0, copy.value.length)
            document.execCommand('copy')
          },
          /**
           * rgba转十六进制
           **/
          transferData() {
            this.hex = this.parseColorString(this.rgba)
            color1.style.background = this.hex
          },
          pick(event) {
            // 获取鼠标坐标
            let x = event.layerX;
            let y = event.layerY;

            // 获取图片像素信息
            let pixel = this.ctx.getImageData(x, y, 1, 1);
            let data = pixel.data;

            // 获取rgba值
            let rgba = 'rgba(' + data[0] + ',' + data[1] +',' + data[2] + ',' + (data[3] / 255) + ')';

            // 设置小正方形的背景颜色
            color.style.background =rgba;

            // 把拼接的字符串设置为元素的文本内容
            text.textContent = `${rgba}; ${this.rgbaToHex(rgba)}`;
          },
          /**
           * 颜色字符串解析为颜色对象
           * @param color 颜色字符串
           * @returns IColorObj
           */
          parseColorString(color) {
            if (color.startsWith('rgb')) {
              return this.parseRgbaColor(color);
            }
            throw new Error(`color string error: ${color}`);
          },
          parseRgbaColor(rgba) {
            let values = rgba
              .replace(/rgba?\(/, '')
              .replace(/\)/, '')
              .replace(/[\s+]/g, '')
              .split(',');
              let a = parseFloat(values[3] || 1),
              r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
              g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
              b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
            return "#" +
              ("0" + r.toString(16)).slice(-2) +
              ("0" + g.toString(16)).slice(-2) +
              ("0" + b.toString(16)).slice(-2);
          },
          /**
           * rgba颜色字符串转化为16进制颜色字符串
           * @param rgba rgba颜色字符串
           * @returns 16进制颜色字符串
           */
          rgbaToHex(rgba) {
            const colorObj = this.parseColorString(rgba);
            return colorObj
          },
          doInput(id) {
            const inputObj = document.createElement('input');
            inputObj.addEventListener('change', this.readFile, false);
            inputObj.type = 'file';
            inputObj.accept = 'image/*';
            inputObj.id = id;
            inputObj.click();
          },
          readFile() {
            const file = this.files[0]; // 获取input输入的图片
            if(!/image\/\w+/.test(file.type)){
                alert("请确保文件为图像类型");
                return false;
            } // 判断是否图片
            const reader = new FileReader();
            reader.readAsDataURL(file); // 转化成base64数据类型
            reader.onload = function(e){
              component.drawToCanvas(this.result); // lve为当前实例
            }
          },
          drawToCanvas(imgData) {
            this.cvs = document.querySelector('#cvs');
            this.cvs.width = 300;
            this.cvs.height = 400;
            this.ctx = this.cvs.getContext('2d');
            const img = new Image;
            img.src = imgData;
            const _this = this
            img.onload = function() { // 必须onload之后再画
              _this.cvs.height = img.height * _this.cvs.width / img.width
              _this.ctx.drawImage(img, 0, 0, _this.cvs.width, _this.cvs.height);
              _this.cvs.onmousedown = e => {
                _this.pick(e)
              }
            }
          }
        }
    })
    component.mount('#root')
    </script>
</body>
</html>